<template>
  <div class="jz-main ptb30">
    <div class="jz-main-title">
      <h2>捐赠名单</h2>
    </div>
    <div class="jz-main-show">
      <div>
        <p>
          佛祖保佑这些好心人写程序永无BUG，工资翻倍，长命百岁，迎娶白富美，走上人生巅峰！
        </p>
      </div>
      <div class="jz-main-table">
        <el-table
          border
          :data="tableData"
          stripe
          style="width: 90%"
          :default-sort="{ prop: 'time', order: 'descending' }"
        >
          <el-table-column prop="nickName" label="昵称" sortable align="center">
          </el-table-column>
          <el-table-column
            prop="payType"
            label="捐赠方式"
            sortable
            align="center"
          >
          </el-table-column>
          <el-table-column
            prop="money"
            label="捐赠金额(￥)"
            align="center"
            sortable
          >
          </el-table-column>
          <el-table-column
            prop="info"
            label="捐赠人留言信息"
            align="center"
            sortable
          >
          </el-table-column>
          <el-table-column prop="time" label="捐赠时间" align="center" sortable>
          </el-table-column>
        </el-table>
      </div>
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="[5, 10, 20, 50]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next"
        :total="total"
        background
      >
      </el-pagination>
    </div>
    <div class="jz-main-title">
      <h2>为什么要捐赠</h2>
    </div>
    <div class="jz-main-show left">
      <div>
        <span class="span-f"
          >捐赠是国外用来支持开发者和资源贡献者的一种常见的方式。</span
        >
        <span>这些开发者不通过加入广告或者进行第三方推广获得收入，</span>
        <span>仅通过使用的用户自己主动捐赠来表达对开发者的感谢！</span>
        <span>当一个非盈利项目仅仅依靠兴趣的支撑，很难确定它还能走多远。</span>
        <span>
          所有的捐赠都将用于提升我的环境配置，维持网站的运行和提高我的积极性。
        </span>
        <span>这个渠道的存在并不意味着你必须捐赠。</span>
        <span>
          你也可以不做任何事。你的捐赠意味着你对我过去所做的表示感谢，而不是表达对未来的期望。
        </span>
        <span>
          但你的捐赠会提高我的积极性和设备配置让我努力把手头上的事做的更好。
        </span>
        <span class="span-l">
          我会维护一份名单以感谢所有的捐赠者。正如我所说，捐赠是一个向我表示感谢的方式。
        </span>
      </div>
    </div>
    <div class="jz-main-title">
      <h2>我要捐赠</h2>
    </div>
    <div class="jz-main-showList">
      <div
        class="good-item"
        @mousemove="isShowPriceL = false"
        @mouseleave="isShowPriceL = true"
      >
        <div>
          <div class="good-img">
            <a>
              <img
                alt="支付测试商品 IPhone X 全面屏 全面绽放"
                src="https://i.loli.net/2018/07/13/5b48a7f468bf2.png"
                lazy="loaded"
              />
            </a>
          </div>
          <h3>支付测试商品 IPhone X 全面屏 全面绽放</h3>
          <h6>此仅为支付测试商品 拍下不会发货</h6>
          <div class="good-price">
            <p v-if="isShowPriceL">￥1.00</p>
            <div v-else>
              <button class="pt">查看详情</button>
              <button class="primary">加入购物车</button>
            </div>
          </div>
        </div>
      </div>
      <div
        class="good-item"
        @mousemove="isShowPriceR = false"
        @mouseleave="isShowPriceR = true"
      >
        <div>
          <div class="good-img">
            <a>
              <img
                alt="捐赠商品"
                src="https://i.loli.net/2020/07/24/6BV9uTwaqModbYL.png"
                lazy="loaded"
              />
            </a>
          </div>
          <h3>捐赠商品</h3>
          <h6>您的捐赠将用于本站维护 给您带来更好的体验</h6>
          <div class="good-price">
            <p v-if="isShowPriceR">￥1.00</p>
            <div v-else>
              <button class="pt">查看详情</button>
              <button class="primary">加入购物车</button>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="gitment-container">
      <div>
        <div class="gitment-header">
          <span class="gitment-header-like-btn">
            <svg
              class="gitment-heart-icon"
              xmlns="http://www.w3.org/2000/svg"
              viewBox="0 0 50 50"
            >
              <path
                d="M25 39.7l-.6-.5C11.5 28.7 8 25 8 19c0-5 4-9 9-9 4.1 0 6.4 2.3 8 4.1 1.6-1.8 3.9-4.1 8-4.1 5 0 9 4 9 9 0 6-3.5 9.7-16.4 20.2l-.6.5zM17 12c-3.9 0-7 3.1-7 7 0 5.1 3.2 8.5 15 18.1 11.8-9.6 15-13 15-18.1 0-3.9-3.1-7-7-7-3.5 0-5.4 2.1-6.9 3.8L25 17.1l-1.1-1.3C22.4 14.1 20.5 12 17 12z"
              ></path>
            </svg>
            Like
            <strong>· 1</strong>
            Liked
          </span>
          <a
            class="gitment-header-issue-link"
            href="https://github.com/Exrick/xmall-comments/issues/1"
            target="_blank"
            >Issue Page</a
          >
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { thanksList } from '@/api/index'
export default {
  name: 'Donation',
  data() {
    return {
      tableData: [],
      currentPage: 1,
      pageSize: 10,
      total: 0,
      isShowPriceL: true,
      isShowPriceR: true,
    }
  },
  methods: {
    handleSizeChange(val) {
      this.pageSize = val
      this.reqThankList()
    },
    handleCurrentChange(val) {
      this.currentPage = val
      this.reqThankList()
    },
    // 获取捐赠列表
    async reqThankList() {
      const res = await thanksList(this.pageSize, this.currentPage)
      // console.log(result)
      this.tableData = res.result.data
      this.total = res.result.recordsTotal
    },
  },
  mounted() {
    this.reqThankList()
  },
}
</script>

<style lang="less" scoped>
* {
  margin: 0;
  padding: 0;
}
.jz-main {
  width: 100%;
  background-color: #ededed;
  .jz-main-title {
    margin: 0 auto;
    width: 1218px;
    height: 60px;
    box-sizing: border-box;
    padding: 0 10px 0 24px;
    border-bottom: 1px solid #d4d4d4;
    border-radius: 8px 8px 0 0;
    box-shadow: 0 1px 7px rgb(0 0 0 / 6%);
    background: linear-gradient(#fbfbfb, #ececec);
    z-index: 10;
    h2 {
      font-size: 18px;
      font-weight: 400;
      line-height: 59px;
      color: #626262;
      margin: 0;
    }
  }
  .jz-main-show {
    display: flex;
    align-items: center;
    flex-direction: column;
    margin: 0 auto 30px;
    width: 1218px;
    background-color: #fff;
    border-radius: 0 0 8px 8px;
    p {
      font-size: 18px;
      padding-top: 38px;
      color: #666;
    }
    span {
      display: block;
      margin-top: 19px;
      color: #666;
      padding: 0px 57.6px;
    }
    .span-f {
      margin: 38px 0 0;
    }
    .span-l {
      margin: 19px 0 38px;
    }
  }
  .jz-main-showList {
    margin: 0 auto 30px;
    width: 1218px;
    background-color: #fff;
    border-radius: 0 0 8px 8px;
    overflow: hidden;
    .good-item {
      width: 609px;
      height: 430px;
      box-sizing: border-box;
      display: inline-block;
      transition: all 0.5s;
      .good-img {
        a {
          display: block;
          cursor: pointer;
        }
        img {
          width: 206px;
          height: 206px;
          margin: 50px 201.5px 10px 201.5px;
        }
      }
      h3 {
        font-size: 16px;
        color: #424242;
        margin: 0 auto;
        text-align: center;
        line-height: 1.2;
        font-weight: 400;
      }
      h6 {
        font-size: 12px;
        color: #d0d0d0;
        padding: 10px;
        text-align: center;
        line-height: 1.2;
        font-weight: 400;
      }
      .good-price {
        font-size: 18px;
        color: #d44d44;
        font-family: Arial;
        text-align: center;
        line-height: 30px;
        font-weight: 700;
        button {
          margin: 0 5px;
          font-size: 12px;
          padding: 5px 15px;
          cursor: pointer;
          line-height: 18px;
        }
        .pt {
          color: #646464;
          border: 1px solid #e1e1e1;
          border-radius: 4px;
          background-color: #f9f9f9;
          background-image: linear-gradient(180deg, #fff, #f9f9f9);
        }
        .pt:hover {
          background-color: #eee;
          background-image: linear-gradient(180deg, #f5f5f5, #eee);
        }
        .primary {
          color: #fff;
          border: 1px solid #5c81e3;
          border-radius: 4px;
          background-color: #678ee7;
          background-image: linear-gradient(180deg, #678ee7, #5078df);
        }
        .primary:hover {
          background-color: #6c8cd4;
          background-image: linear-gradient(180deg, #6c8cd4, #4769c2);
        }
      }
    }
    .good-item:hover {
      transform: translateY(-3px);
      box-shadow: 1px 1px 20px #999;
    }
  }
  .jz-main-table {
    margin: 38px 0 38px 120px;
    width: 100%;
  }
  .el-pagination {
    align-self: flex-end;
    margin: 0 60px 38px;
  }
  .left {
    align-items: flex-start;
  }
  .gitment-container {
    margin: 0 auto 30px;
    width: 1218px;
    font-family: sans-serif;
    font-size: 14px;
    line-height: 1.5;
    color: #333;
    word-wrap: break-word;
    .gitment-header {
      margin: 19px 0;
      .gitment-header-like-btn {
        cursor: pointer;
        svg {
          vertical-align: middle;
          height: 30px;
        }
      }
      .gitment-header-issue-link {
        float: right;
        line-height: 30px;
        color: #666;
      }
    }
  }
}

.ptb30 {
  padding-top: 30px;
  padding-bottom: 30px;
}
</style>
